<!-- 库存详情 -->
<template>
    <div class="page has-navbar stockDetail">
        <div class="page-content">
            <div class="tab-change-wrap">
                <div class="change-tab">
                    <div @click.stop="changeModeType">
                        <span>商品</span>
                        <span class="tab"><i :class="modeType=='PRODUCT'?'':'other'"></i></span>
                        <span>原料</span>
                    </div>
                </div>
                <div class="change-tab">
                    <div @click.stop="changeTab">
                        <span>吧台</span>
                        <span class="tab"><i :class="nowTab=='BAR'?'':'other'"></i></span>
                        <span>仓库</span>
                    </div>
                </div>
            </div>
            <div class="bar bar-header item-input-inset" v-if="nowTab=='BAR'">
                <label class="item-input-wrapper"><i class="icon ion-ios-search placeholder-icon"></i>
                    <form action="javascript:;" @submit="onSearch" id="von-search-8xz">
                        <input type="search" placeholder="输入关键字" @blur="onSearch" v-model="keywords">
                    </form>
                </label>
                <button type="button" class="button button-clear button-positive" @click="onCancel">Cancel</button>
            </div>

            <div class="listTitle clearfix" style="text-align:center;">
                <div style="width:40%" class="left">{{this.modeType=='PRODUCT'?"商品":"原料"}}名称</div>
                <div style="width:30%" class="left" v-if="nowTab=='BAR'">单价</div>
                <div :style="nowTab=='BAR'?'width:30%':'width:60%'" class="left">当前库存</div>
                <!-- <div style="width:20%" class="left">库存总价</div> -->
            </div>
            <scroll :class="{lessTop:nowTab=='BAR'}">
                <div v-if="!searching" style="text-align:center;">
                    <!-- <div v-for="(item,idx) in stockList" class="stockList">
                        <div class="item item-divider" v-text="item.typeName"></div>
                        <list class="list-ios">
                            <item v-for="(good,idx) in item.products" class="listItem">
                                <div style="width:40%" v-text="good.name" class="left"></div>
                                <div style="width:20%" v-text="'￥'+good.salePrice" class="left"></div>
                                <div style="width:20%" v-text="good.quantity" class="left"></div>
                                <div style="width:20%" v-text="'￥'+(good.quantity*good.salePrice).toFixed(2)" class="left"></div>
                            </item>
                        </list>
                    </div> -->
                    <list class="list-ios">
                        <item v-for="(good,idx) in stockList" class="listItem">
                            <div style="width:40%" v-text="good.name" :class="good.quantity<6?'left red-c':'left'"></div>
                            <div style="width:30%" v-if="nowTab=='BAR'" v-text="'￥'+good.salesPrice" :class="good.quantity<6?'left red-c':'left'"></div>
                            <div :style="nowTab=='BAR'?'width:30%':'width:60%'" v-text="good.quantity" :class="good.quantity<6?'left red-c':'left'"></div>
                            <!-- <div style="width:20%" v-text="'￥'+(good.quantity*good.salesPrice).toFixed(2)" class="left"></div> -->
                        </item>
                    </list>
                </div>

                <list class="list-ios" v-else style="text-align:center;">
                    <item v-for="(good,idx) in searchList" class="listItem">
                        <div style="width:40%" v-text="good.name" :class="good.quantity<6?'left red-c':'left'"></div>
                        <div style="width:30%" v-if="nowTab=='BAR'" v-text="'￥'+good.salesPrice" :class="good.quantity<6?'left red-c':'left'"></div>
                        <div :style="nowTab=='BAR'?'width:30%':'width:60%'" v-text="good.quantity" :class="good.quantity<6?'left red-c':'left'"></div>
                        <!-- <div style="width:20%" v-text="'￥'+(good.quantity*good.salesPrice).toFixed(2)" class="left"></div> -->
                    </item>
                </list>
            </scroll>
        </div>
    </div>
</template>

<script type="text/javascript">
import {INV_URL} from "./../../../../urlConfig/index";
export default{
    props: ['storeId'],
	data () {
		return {
            stockList: [],
            searchList: [],
            keywords: '',
            searching: false,
            modeType:"PRODUCT",
            nowTab:"BAR"//CAP
		}
	},
    watch:{
        nowTab(val){
            this.searching = false;
            if(val == "BAR"){
                if(this.modeType == "PRODUCT"){
                    this.getInventoryList();
                }else{
                    this.getInventoryListForMt();
                }
            }else{
                this.keywords = "";
                this.stockList = [];
                this.searchList = [];
                this.getCapList();
            }
        },
        modeType(val){
            this.searching = false;
            if(this.nowTab == "BAR"){
                if(val == "PRODUCT"){
                    this.getInventoryList();
                }else{
                    this.getInventoryListForMt();
                }
            }else{
                this.keywords = "";
                this.stockList = [];
                this.searchList = [];
                this.getCapList();
            }
        }
    },
    methods: {
        changeTab(){
			this.nowTab == "BAR"?this.nowTab="CAP":this.nowTab="BAR";
		},
        changeModeType(){
			this.modeType == "PRODUCT"?this.modeType="MATERIAL":this.modeType="PRODUCT";
        },
        getInventoryListForMt: function () {
            // this.$http.get('inventories?storeId='+this.storeId).then((res)=>{
            //     this.stockList = res.data;
            // });
            // https://prod-api.huoxingy.com/v1/inv/search?storeId=574b59ef-b19c-11e7-9233-37891743d141&q=c&mold=MATERIAL

            this.$http.get(INV_URL+'/search?storeId='+this.storeId+'&q='+encodeURI('')+'&mold=MATERIAL').then((res)=>{
                // console.log(res.data)
                this.stockList = res.data;
            })
        },
        // 获得列表
        getInventoryList: function () {
            // this.$http.get('inventories?storeId='+this.storeId).then((res)=>{
            //     this.stockList = res.data;
            // });

            this.$http.get('products/stores-search?storeId='+this.storeId+'&q='+encodeURI('')+'&stockEnabled=true').then((res)=>{
                // console.log(res.data)
                this.stockList = res.data;
            })
        },
        getCapList(){
            this.$http({
                url:"inventories",
                method:"GET",
                params:{
                    storeId:this.storeId,
                    mold:this.modeType,
                    // mold:"PRODUCT",
                    page:0,
                    size:10000
                }
            }).then(res=>{
                this.stockList = res.data.content;
            })
        },
        onSearch() {
            if(this.modeType == "PRODUCT"){
                this.$http.get('products/stores-search?storeId='+this.storeId+'&q='+encodeURI(this.keywords)+'&stockEnabled=true').then((res)=>{
                this.searchList = res.data;
                if ( this.searchList[0] ) {
                    this.searching = true;
                } else {
                    $toast.show('无相关结果', 2000).then(() => {})
                }

                    document.getElementsByTagName('input')[0].blur();
                }).catch(()=>{

                })
            }else{
                this.$http.get(INV_URL+'/search?storeId='+this.storeId+'&q='+encodeURI(this.keywords)+'&mold=MATERIAL').then((res)=>{
                // console.log(res.data)
                    this.stockList = res.data;
                })
            }
            
        },

        onCancel() {
            this.searching = false;
            this.keywords = '';
            this.getInventoryList();
        }
    },
    created(){
        if(this.nowTab == "BAR"){
            this.getInventoryList();
        }else{
            this.getCapList();
        }
    },
    mounted(){
        document.title = "库存详情";
        /*document.getElementsByTagName('input')[0].onblur = ()=>{
            this.onSearch();
        }*/
    }
}
</script>
<style lang="scss" scoped>
	@import "stockDetail";
</style>
